﻿var Seq = {};

Seq.Viewport = Class.create();
Seq.Viewport.prototype = Object.extend(Seq.Viewport.prototype, {

    initialize: function() {
        this.headersize = 100;
        this.beatwidth = 80;
        this.multiplier = 100;
        this.zoom = 100;
        this.duration = 4 * 4 * 100;
        this.quant = 8;
        this.tempo = 140;
        this.quantsnap = 1;
        this.numerator = 4;
        this.denominator = 4;
    },

    BeatWidth: function() {
        return this.TtoX(this.multiplier * 2) - this.TtoX(this.multiplier * 1);
    },

    SnapT: function(t) {
        t /= this.multiplier;
        t *= this.quant;
        t = Math.floor(t);
        t /= this.quant;
        t *= this.multiplier;
        return t;
    },

    XtoT: function(x) {
        x -= this.headersize;
        x /= this.beatwidth;
        x *= this.multiplier;
        x /= this.zoom / 100;
        if (x < 0) x = 0;
        if (x > this.duration) x = this.duration;
        return x;
    },

    TtoX: function(t) {
        if (t < 0) t = 0;
        if (t > this.duration) t = this.duration;
        t /= (100 / this.zoom);
        t /= this.multiplier;
        t *= this.beatwidth;
        t += this.headersize;
        return t;
    },

    YtoK: function(y) {
        y /= 20;
        y = Math.floor(y);
        y = 127 - y;
        return y;
    },

    KtoY: function(k) {
        k = 127 - k;
        k = Math.floor(k) * 20;
        return k;
    },

    YtoV: function(y) {
        y = 200 - y;
        v = 128 * v / 200;
        return y;
    },

    VtoY: function(v) {
        v = 200 * v / 128;
        v = 200 - v;
        return v;
    }

});









function keyName(n) {
    var oN = Math.floor(n / 12);
    var oK = n % 12;
    var nB = ['C-', 'C#', 'D-', 'D#', 'E-', 'F-', 'F#', 'G-', 'G#', 'A-', 'A#', 'B-'];
    return nB[oK] + oN;
}

var randomprefix = '';
var randomindex = 0;

function randomid(prefix) {
    if (randomprefix == '') {
        randomprefix = '';
        for (var k = 0; k < 6; k++)
            randomprefix += Math.round(Math.random() * 9).toString();
    }
    var id = prefix + randomprefix;
    for (var k = 0; k < 6; k++)
        id += Math.round(Math.random() * 9).toString();
    id += randomindex.toString();
    randomindex++;
    return id;
}

function getCurrentSessionID() {
    var id = '';
    var m = /SESSION=([a-z0-9]+)/ig.exec(location.hash);
    if (m)
        if (m.length > 1)
        id = m[1];
    return id;
}

function fixsessionlink(link) {
    var sid = getCurrentSessionID();
    link.href = link.href + "#SESSION=" + sid;
}

function initPageHeader(selectedtab) {
    var sid = getCurrentSessionID();

    var tabs =
	[
		{
		    file: 'jam.htm',
		    title: 'JAM'
		},
		{
		    file: 'song.htm',
		    title: 'SNG'
		},
		{
		    file: 'pattern.htm',
		    title: 'PAT'
		},
		{
		    file: 'patterns.htm',
		    title: 'PATS'
		},
		{
		    file: 'instruments.htm',
		    title: 'INS'
		},
		{
		    file: 'settings.htm',
		    title: 'SET'
		}
	];

    var ht = '';
    ht += '<div class="logo"></div>\n';
    ht += '<div class="status">\n';
    ht += '<div class="clock">\n';
    ht += '1:2:3:4\n';
    ht += '</div>\n';
    ht += '<div class="loopinfo">\n';
    ht += 'LOOP-ON<br />\n';
    ht += '3:3:1<br />\n';
    ht += '3:3:3<br />\n';
    ht += '</div>\n';
    ht += '<div class="playstate">\n';
    ht += 'zzz\n';
    ht += '</div>\n';
    ht += '<div class="buttons">\n';
    ht += '<a href="#">RWD</a> | <a href="#">PLAY</a> | <a href="#">STOP</a> | <a href="#">FWD</a>\n';
    ht += '</div>\n';
    ht += '</div>\n';
    ht += '<div class="tabs">\n';
    ht += '<ul>\n';

    for (var j = 0; j < tabs.length; j++) {
        var tab = tabs[j];
        if (tab.title == selectedtab)
            ht += '<li class="selected">';
        else
            ht += '<li>';
        ht += '<a href="' + tab.file + '#SESSION=' + sid + '"><span>' + tab.title + '</span></a>';
        ht += '</li>\n';
    }
    ht += '<li class="last"></li>\n';
    ht += '</ul>\n';
    ht += '</div>\n';

    $('headerblock').innerHTML = ht;

}


function setStatus(txt) {
    $('statustext').innerHTML = txt;
    window.status = txt;
}





function onNotifyData(r) {
    setStatus('');
}

function notify(msg, extra) {
    var sid = getCurrentSessionID();
    setStatus('Sending changes..');
    var p = { 'notify': msg, 'session': sid };
    p = Object.extend(p, extra);
    new Ajax.Request('/api/call', {
        parameters: p,
        onSuccess: onNotifyData
    });
}

















function clickPopupMenu(evt, id, cb) {
    closePopupMenu(evt, id);
    cb();
}

function openPopupMenu(x, y, id, items) {
    var ulel = document.createElement('ul');
    for (var j = 0; j < items.length; j++) {
        var liel = document.createElement('li');
        ulel.appendChild(liel);
        // liel.className = items[j].className || '';

        var ael = document.createElement('a');
        liel.appendChild(ael);
        Event.observe(ael, 'click', clickPopupMenu.bindAsEventListener(this, id, items[j].callback));

        ael.appendChild(document.createTextNode(items[j].name));
    }

    var el = $(id);
    el.className = 'popupmenu';
    el.style.position = 'absolute';
    el.style.left = (x - 40) + 'px';
    el.style.top = (y - 15) + 'px';
    el.innerHTML = '';
    el.appendChild(ulel);
    // Event.observe( el, 'mouseout', this.closePopupMenu.bindAsEventListener( this, id ) );
    Element.show(el);
    new Effect.Appear(el, { duration: 0.2 });
}

function closePopupMenu(evt, id) {
    var el = $(id);
    new Effect.Fade(el, { duration: 0.3 });
}






function setDropdownValue(el, value) {
    el = $(el);
    var sel = 0;
    for (var j = 0; j < el.options.length; j++) {
        if (el.options[j].value == value)
            sel = j;
    }
    el.selectedIndex = sel;
}

function getDropdownValue(el) {
    el = $(el);
    var val = '';
    if (el.selectedIndex >= 0)
        val = el.options[ el.selectedIndex ].value;
    return val;
}




function findListItem(list, propname, propvalue) {
    for (var j = 0; j < list.length; j++)
        if (list[propname] == propvalue)
        return list[propname];
    return null;
}

function getListItemID(list, itemid) {
    return findListItem(list, 'id', itemid);
}





